<template>
  <!-- src="/public/index.html" -->
  <!-- <iframe
            src="/public/index.html"
            style="width: 100%;height: 100%;"
            frameborder="1/0"
            scrolling="yes"
  ></iframe>-->
  <div class="visual">
    <div class="layout">
      <!-- 左边 -->
      <div class="cloumn">
        <div
          id="first_level"
          class="townBaseinfo borderimage"
          v-show="leftContainer == 1"
        >
          <div class="title">区设备Statistics情况</div>
          <ul class="content">
            <li>
              <div>地址</div>
              <div>充电桩</div>
              <div>充电桩</div>
              <div>换电柜</div>
            </li>
            <li>
              <div>石碁镇</div>
              <div>1</div>
              <div>1</div>
              <div>1</div>
            </li>
            <li v-for="(item, i) in townList" :key="i">
              <div>{{ item }}</div>
              <div>0</div>
              <div>0</div>
              <div>0</div>
            </li>
          </ul>
        </div>

        <div id="second_level" v-show="leftContainer == 2">
          <!-- 第一 -->
          <div class="lFirstBox borderimage">
            <div class="title">镇设备运行情况</div>
            <ul class>
              <li class>
                <div>Charging Cabinet:</div>
                <div>
                  Online
                  <span class="chargingOnline">
                    {{ townArea.chargingOnline }}
                  </span>
                </div>
                <div>
                  Offline
                  <span class="chargingNoline">
                    {{ townArea.chargingNoline }}
                  </span>
                </div>
              </li>
              <li class>
                <div>换电柜:</div>
                <div>
                  Online
                  <span class="chargeOnline">{{ townArea.chargeOnline }}</span>
                </div>
                <div>
                  Offline
                  <span class="chargeNoline">{{ townArea.chargeNoline }}</span>
                </div>
              </li>
              <li class>
                <div>充电桩:</div>
                <div>
                  Online
                  <span>0</span>
                </div>
                <div>
                  Offline
                  <span>0</span>
                </div>
              </li>
            </ul>
          </div>
          <!-- 第二 -->
          <div class="lSecondBox borderimage">
            <div class="faultInfo" id="faultInfo">
              <div class="title">Device Details</div>
              <div class="content">
                <p>
                  Device Name:
                  <span>{{ deviceInfo.deviceName }}</span>
                </p>
                <p>
                  地址:
                  <span>{{ deviceInfo.address }}</span>
                </p>
                <p>
                  设备Status:
                  <span>
                    {{
                      deviceInfo.deviceStatus == 1
                        ? "Online"
                        : deviceInfo.deviceStatus == 2
                        ? "Offline"
                        : deviceInfo.deviceStatus == 3
                        ? "设备故障"
                        : "---"
                    }}
                  </span>
                </p>
                <p>
                  设备Type:
                  <span>
                    {{
                      deviceInfo.deviceType == 1
                        ? "换电柜"
                        : deviceInfo.deviceType == 2
                        ? "租车"
                        : deviceInfo.deviceType == 3
                        ? "Charging Cabinet"
                        : "---"
                    }}
                  </span>
                </p>
                <p>
                  设备Employ时间:
                  <span>{{ formatSeconds(deviceInfo.serverTime) }}</span>
                </p>
                <p>
                  空仓:
                  <span>{{ deviceInfo.noBattery }}</span>
                </p>
                <p>
                  Charging:
                  <span>{{ deviceInfo.cell }}</span>
                </p>
                <p>
                  未关门:
                  <span>{{ deviceInfo.notClose }}</span>
                </p>
                <p>
                  满电:
                  <span>{{ deviceInfo.suffused }}</span>
                </p>
                <p>
                  故障仓:
                  <span>{{ deviceInfo.abnormal }}</span>
                </p>
                <p>
                  总订单:
                  <span>{{ deviceInfo.totalOrder }}</span>
                </p>
                <p>
                  收费标准:
                  <span>Charging Cabinet1元3小时, 换电柜月租299</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 第三 -->
          <div class="lthirdlyBox borderimage">
            <!-- 设备故障Statistics -->
            <div class="faultStat" id="faultStat">
              <div class="title">设备故障Statistics</div>
              <div class="content">
                <div class="data">
                  <div class="left">
                    <div class="bigBox">
                      <div class="box1">
                        <div>充电桩故障</div>
                        <div>0</div>
                      </div>
                      <div class="box2">
                        <div>Charging Cabinet故障</div>
                        <div>0</div>
                      </div>
                      <div class="box3">
                        <div>换电柜故障</div>
                        <div>0</div>
                      </div>
                      <div class="box4">
                        <div>热成像设备</div>
                        <div>0</div>
                      </div>
                    </div>
                  </div>
                  <div class="center">
                    <div>0</div>
                    <div>0</div>
                    <div>0</div>
                    <div>0</div>
                  </div>
                  <div class="right">
                    <div>0</div>
                    <div>0</div>
                    <div>0</div>
                    <div>0</div>
                  </div>
                </div>
                <div class="state">
                  <div class="left">
                    <div class="bgcColor"></div>
                    <div style="font-size: 0.5rem;">Completed</div>
                  </div>
                  <div class="center">
                    <div class="bgcColor"></div>
                    <div style="font-size: 0.5rem;">未处理</div>
                  </div>
                  <div class="right">
                    <div class="bgcColor"></div>
                    <div style="font-size: 0.5rem;">已处理</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间 -->
      <div class="cen cloumn" style="position: relative;">
        <div class="cenTitle">
          <div></div>
          <span id="cenTitleText">{{ cenTitleText }}充电站分布图</span>
          <div></div>
        </div>
        <ul>
          <li>
            <div>换电柜总数</div>
            <span>{{ tradeCabineDevice }}</span>
          </li>
          <li>
            <div>Charging Cabinet总数</div>
            <span>{{ fullCabinetDevice }}</span>
          </li>
          <li>
            <div>充电桩总数</div>
            <span>1</span>
          </li>
        </ul>
        <!-- 地图 -->
        <div id="secondBox" ref="secondBox">
          <!-- height: 32.33rem; -->
          <div
            id="indexMap"
            style="width: 100%; position: relative;"
            :style="{ height: mapHeight ? mapHeight + 'px' : null }"
          >
            <button id="btn" @click="backtrack()">返回</button>
            <button id="PositionBtn" @click="getPosition()">
              获取CurrentPosition
            </button>
            <select
              id="mySelect"
              v-show="mySelectShow"
              @change="mySelectFn($event)"
            >
              <!-- <option
                v-for="(item, index) in villageList"
                :key="index"
                :value="item.name"
              >
                {{ item.name }}
              </option>-->
            </select>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="cloumn" style="position: relative;">
        <!-- 时间显示 -->
        <div
          id="time"
          style="
              position: absolute;
              right: 3.02rem;
              top: -1.82rem;
              font-size: 1rem;
            "
        ></div>
        <!--右边第一盒子 报警信息 -->
        <div class="alarmInfo borderimage">
          <div class="title">报警信息</div>
          <div class="box" style="display: block;">
            <div class="list">
              <ul style="overflow: hidden;" id="allList">
                <li
                  v-for="(item, index) in alarmList"
                  v-show="index < 2"
                  :key="item.id"
                >
                  <span class="icon-dot"></span>
                  <div class="num">{{ index + 1 }}.</div>
                  <div>
                    <div class>{{ item.alarm }}</div>
                    <div>
                      <div class>Device Number: {{ item.sn }}</div>
                      <div class>时间: {{ item.stime }}</div>
                    </div>
                  </div>
                </li>
              </ul>
              <!-- <section class="ces-pagination"> -->
              <!-- <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage3"
                  :page-size="100"
                  layout="prev, pager, next, jumper"
                  :total="1000"
              ></el-pagination>-->
              <!-- </section> -->
              <!-- <ul style="overflow: hidden" id="rowsList"></ul> -->
            </div>
          </div>
        </div>

        <!-- 右边第二盒子 视频监控、充电占比  -->
        <div class="rSecondBox borderimage">
          <div
            id="rechargeAnswer"
            class="rechargeAnswer"
            v-show="rightBomArea == 1"
          >
            <div class="title">充电占比</div>
            <div class="content">
              <div id="answerPicture"></div>
              <div class="answerBox">
                <div class="pile" style="width: 0%;" id="pileBgc">
                  <div></div>
                  <span>{{ pileBgc }}</span>
                </div>
                <div class="tank" style="width: 0%;" id="tankBgc">
                  <div></div>
                  <span>{{ tankBgc }}</span>
                </div>
                <div class="electric" style="width: 0%;" id="electricBgc">
                  <div></div>
                  <span>{{ electricBgc }}</span>
                </div>
              </div>
            </div>
          </div>

          <div id="monitoringCount" v-show="rightBomArea == 2">
            <div class="title">监控设备数量</div>
            <div class="content">
              <div>
                Online
                <span class="onlineCount">1</span>
              </div>
              <div>
                Offline
                <span class="nolineCount">0</span>
              </div>
            </div>
          </div>

          <div id="monitoring" v-show="rightBomArea == 3">
            <div class="title">视频监控</div>
            <div class="content">
              <!-- 监控视频 -->
              <!--  -->
              <div id="playWind" style="width: 20rem; height: 12.92rem;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import rechargeAnswer from "./js/rechargeAnswer";
import L from "leaflet";
import zhenList from "./js/zhenList.js";
import axios from "axios";
import EZUIKit from "../../../../public/js/ezuikit";
import showtime from "./js/date";
import answerInitPercentage from "./js/pie_percentage";
import myRem from "./js/myrem";
import gcj02_To_gps84 from "./js/gcj02_To_gps84";

import "../../../../public/js/jsPlugin-1.2.0";
export default {
  data() {
    return {
      leftContainer: 1,
      rightBomArea: 1,
      mySelectShow: false,
      cenTitleText: "番禺区",
      villageList: [],
      alarmList: [], // 报警信息
      tradeCabineDevice: 0, // 换电柜设备
      fullCabinetDevice: 0, // Charging Cabinet设备

      tradeCabinetonLine: 0, // 换电柜柜体OnlineStatus
      fullCabinetonLine: 0, // Charging Cabinet柜体OnlineStatus
      chargingPileonLine: 0, // 充电桩 柜体OnlineStatus

      gzGeoJSON: null,
      markerList: [],
      townArea: {
        chargingOnline: 0, // Charging CabinetOnline
        chargingNoline: 0, // Charging CabinetOffline
        chargeOnline: 0, // 换电柜Online
        chargeNoline: 0 // 换电柜Offline
      },
      deviceInfo: {},
      townList: [
        "洛浦街道",
        "华龙镇",
        "新造镇",
        "南村镇",
        "大石街道",
        "石壁街道",
        "钟村街道",
        "东环街道",
        "沙头街道",
        "市环街道",
        "大龙街道",
        "沙湾街道",
        "桥南街道",
        "小谷围街道",
        "石楼镇"
      ],
      electricBgc: "",
      tankBgc: "",
      pileBgc: "",

      latArr: [],
      lngArr: [],
      lat: 0,
      lng: 0,

      mapHeight: 0
    };
  },
  beforeCreate() {
    myRem();
  },
  beforeDestroy() {},
  updated() {},
  //
  async created() {
    this.getDeviceListInfo(); //获取设备列表信息
    this.alarmGetList(); // 报警信息
  },

  mounted() {
    // var getCenterPoint = null;
    this.mapHeight = this.$refs.secondBox.offsetHeight;

    setInterval(showtime, 1000);
    console.log("this.mapHeight==", this.mapHeight);
    this.mapInit();

    // this.init();
    const answerPicture = window.echarts.init(
      document.getElementById("answerPicture")
    );
    setTimeout(() => {
      let { electricBgc, tankBgc, pileBgc } = answerInitPercentage(
        this.tradeCabinetonLine,
        this.fullCabinetonLine,
        this.chargingPileonLine
      ); // 渲染图饼百分比
      this.electricBgc = electricBgc;
      this.tankBgc = tankBgc;
      this.pileBgc = pileBgc;
      rechargeAnswer(
        answerPicture,
        this.tradeCabinetonLine,
        this.fullCabinetonLine,
        this.chargingPileonLine,
        this.pileBgc,
        this.tankBgc,
        this.electricBgc
      );
    }, 1000);
  },
  methods: {
    mapInit() {
      var url =
        "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}";
      // 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
      var map = L.map("indexMap").setView([30, 104], 4);
      L.tileLayer(url).addTo(map);
      window.leafletMap = map;

      // 获取中心点
      (window.getCenterPoint = list => {
        let latArr = [],
          lngArr = [],
          lat = 0,
          lng = 0;
        list.map(v => {
          latArr.push(v[0]);
          lngArr.push(v[1]);
        });
        lat = (Math.min.apply(Math, latArr) + Math.max.apply(Math, latArr)) / 2;
        lng = (Math.min.apply(Math, lngArr) + Math.max.apply(Math, lngArr)) / 2;
        return [lng, lat];
      }),
        this.initGeoJSON({
          url: "../../../../public/geojson/py.json",
          centerLatlng: [22.97356659115516, 113.40156555175783],
          zoom: 12
        });
    },
    async getDeviceListInfo() {
      const res = await this.apis.getDeviceListInfo();
      // console.log("res------", res);
      let list = res.data;

      var tradeCabinetList = []; // 换电柜
      var fullCabinetList = []; // Charging Cabinet fullCabinetList
      // console.log('chargingDevice---', chargingDevice)
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i].deviceType == 1) {
          tradeCabinetList.push(res.data[i]); // 换电柜设备
          this.tradeCabineDevice += 1;
        } else if (res.data[i].deviceType == 3) {
          fullCabinetList.push(res.data[i]); // Charging Cabinet设备
          this.fullCabinetDevice += 1;
        }
      }
      // console.log('tradeCabinetList', tradeCabinetList)
      // console.log('fullCabinetList', fullCabinetList)
      // console.log('chargeDevice---', chargeDevice)
      // console.log('chargingDevice---', chargingDevice)
      // 计算出柜体Status
      // 换电柜
      for (var i = 0; i < tradeCabinetList.length; i++) {
        for (
          var j = 0;
          j < tradeCabinetList[i].deviceInfoDTO.engaged.length;
          j++
        ) {
          if (
            tradeCabinetList[i].deviceInfoDTO.engaged[j].status == 1 ||
            tradeCabinetList[i].deviceInfoDTO.engaged[j].status == 2
          ) {
            this.tradeCabinetonLine += 1;
          }
        }
      }
      // Charging Cabinet
      for (var i = 0; i < fullCabinetList.length; i++) {
        for (
          var j = 0;
          j < fullCabinetList[i].deviceInfoDTO.engaged.length;
          j++
        ) {
          if (
            fullCabinetList[i].deviceInfoDTO.engaged[j].status == 1 ||
            fullCabinetList[i].deviceInfoDTO.engaged[j].status == 2
          ) {
            this.fullCabinetonLine += 1;
          }
        }
      }
      // console.log("this.tradeCabinetonLine--", this.tradeCabinetonLine);
      // console.log("this.fullCabinetonLine--", this.fullCabinetonLine);
      // 渲染镇设备运行情况开始
      var chargeList = []; // 换电柜
      var chargingList = []; // Charging Cabinet
      var pilesList = []; // 充电桩
      for (let i = 0; i < list.length; i++) {
        if (list[i].deviceType == 1) {
          // 换电柜
          chargeList.push(list[i]);
        } else if (list[i].deviceType == 3) {
          // Charging Cabinet
          chargingList.push(list[i]);
        }
      }
      // Charging Cabinet
      // var chargingOnline = 0;
      // var chargingNoline = 0;
      // console.log('chargingList---', chargingList)
      for (let i = 0; i < chargingList.length; i++) {
        if (chargingList[i].deviceStatus == 1) {
          this.townArea.chargingOnline += 1;
        } else if (chargingList[i].deviceStatus == 2) {
          this.townArea.chargingNoline += 1;
        }
      }
      // 换电柜
      // var chargeOnline = 0
      // var chargeNoline = 0
      for (let i = 0; i < chargeList.length; i++) {
        if (chargeList[i].deviceStatus == 1) {
          this.townArea.chargeOnline += 1;
        } else if (chargeList[i].deviceStatus == 2) {
          this.townArea.chargeNoline += 1;
        }
      }
      // 渲染镇设备运行情况结束

      var cell = 0; // Charging
      var suffused = 0; // Battery充满
      var abnormal = 0; // 故障仓
      var notClose = 0; // 未关门
      var noBattery = 0; // 没Battery
      for (var i = 0; i < list.length; i++) {
        // console.log('list[i].lat---', list[i].lat)
        // console.log('list[i].lng---', list[i].lng)
        let latArr = [Number(list[i].lat), Number(list[i].lng)]; //拿到后端返回的设备列表经纬度
        var mymarker = L.marker(latArr, { draggable: true }).addTo(
          // 用于在地图上显示可点击/可拖动的图标
          window.leafletMap
        );
        // 用于在地图图层上显示小文本
        mymarker
          .bindTooltip(list[i].address + ":" + list[i].deviceType + "台设备", {
            direction: "top",
            permanent: true
          })
          .openTooltip();
        mymarker.myObj = {
          itemObj: list[i]
        };

        this.flag = ""; // 避免重复发请求
        this.tempRecordId = "";
        mymarker.on("click", async e => {
          console.log("e----", e);
          let markerInfo = e.target.myObj.itemObj;
          setTimeout(() => {
            this.tempRecordId = markerInfo.id;
          }, 10);
          if (this.tempRecordId === markerInfo.id) {
            return false;
          } else if (markerInfo.address == "广州市番禺区官涌幼儿园") {
            //广州市番禺区官涌幼儿园
            this.rightBomArea = 3;
            // 开启监控视频  new EZUIPlayer
            setTimeout(() => {
              var player = new EZUIKit.EZUIPlayer({
                id: "playWind",
                autoplay: true,
                url: "ezopen://open.ys7.com/J28314721/1.hd.live",
                // url: 'ezopen://open.ys7.com/J28314721/1.live',
                accessToken:
                  "at.cl0ljwtl4p1lduy44qr3jme25yljkl5u-58gbd5wrdc-15zfhla-k5bytmgji",
                // decoderPath: './',
                decoderPath: "../../../../public"
                // width: 500,
                // height: 310,
              });
            }, 0);
          }
          this.leftContainer = 2;

          noBattery = 0; // 没Battery
          cell = 0; // Charging
          suffused = 0; // Battery充满
          abnormal = 0; // 故障仓
          notClose = 0; // 未关门

          let sn = markerInfo.sn;
          let engagedList = markerInfo.deviceInfoDTO.engaged;

          for (let j = 0; j < engagedList.length; j++) {
            if (engagedList[j].status === 0) {
              noBattery += 1;
            } else if (engagedList[j].status === 1) {
              cell += 1;
            } else if (engagedList[j].status === 2) {
              suffused += 1;
            } else if (engagedList[j].status === 3) {
              abnormal += 1;
            }
            if (engagedList[j].cabinetStatus === 1) {
              notClose += 1;
            }
          }
          let deviceInfo = {
            noBattery: noBattery, // 没Battery
            cell: cell, // Charging
            suffused: suffused, // Battery充满
            abnormal: abnormal, // 故障仓
            notClose: notClose, // 未关门
            deviceName: markerInfo.deviceName,
            address: markerInfo.address,
            deviceStatus: markerInfo.deviceStatus,
            deviceType: markerInfo.deviceType,
            serverTime: markerInfo.deviceInfoDTO.serverTime,
            totalOrder: markerInfo.deviceInfoDTO.totalOrder
          };

          this.deviceInfo = deviceInfo;
          setTimeout(() => {
            this.flag = sn;
          }, 100);
          if (sn !== this.flag) {
            const res = await this.apis.alarmGetList({ sn: sn });
            console.log("res=", res);
            if (res.code == 200) {
              this.alarmList = res.rows;
            }
          }
        });
      }
    },
    // ---------------------------------------------------
    async alarmGetList() {
      const res = await this.apis.alarmGetList();
      // console.log("alarmGetList------", res);
      if (res.code == 200) {
        this.alarmList = res.rows;
      }
    },
    //  返回按钮
    backtrack() {
      this.alarmGetList();
      window.gzGeoJSON.remove();
      this.initGeoJSON({
        url: "../../../../public/geojson/py.json",
        centerLatlng: [22.97356659115516, 113.40156555175783],
        zoom: 12
      });

      let mySelect = document.getElementById("mySelect");
      mySelect.options.length = 0;
      this.mySelectShow = false;

      this.tempRecordId = "";
      this.flag = "";
      this.leftContainer = 1;
      this.rightBomArea = 1;
      this.cenTitleText = "番禺区";
      // 移除所有marker
      if (this.markerList.length > 0) {
        this.markerList.map(v => {
          v && v.remove();
        });
      }
    },
    mySelectFn(e) {
      // console.log("e---", e);
      var tempList = [];
      // 移除所有marker
      if (this.markerList.length > 0) {
        this.markerList.map(v => {
          v && v.remove();
        });
      }
      // console.log("e----", e);
      let obj = JSON.parse(e.target.value);
      if (obj.name === "默认") return;
      tempList.push(obj);
      tempList.forEach(item => {
        // console.log('obj-----', obj)
        if (obj.name !== item.name) {
          return false;
        } else {
          // console.log('obj---', obj)
          tempList.push(obj);
          let latArr = [Number(item.latlng[1]), Number(item.latlng[0])];
          // console.log('latArr----', latArr)
          let icon = L.icon({
            iconUrl: "../../../../public/images/ic_bike.png",
            iconSize: [40, 40]
          });
          var marker = L.marker(latArr, {
            draggable: false,
            icon: icon
          }).addTo(window.leafletMap);
          // console.log('marker----', marker)

          marker.bindTooltip(item.name).openTooltip();
          this.markerList.push(marker);
          window.leafletMap.setView(latArr, 15);
        }
      });
    },
    // 获取CurrentPosition
    getPosition() {
      axios
        .get("https://apis.map.qq.com/ws/location/v1/ip", {
          params: {
            key: "PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM",
            output: "jsonp"
          }
        })
        .then(result => {
          console.log("获取CurrentPositionresult=", result);
          let finalResult;
          const QQmap = data => {
            finalResult = data;
          };
          new Function("QQmap", result.data)(QQmap);

          let latlng = [
            finalResult.result.location.lng,
            finalResult.result.location.lat
          ];
          console.log("获取CurrentPositionlatlng=", latlng);
          let obj = gcj02_To_gps84(latlng[0], latlng[1]);
          window.leafletMap.setView([obj.lat, obj.lng], 16);
        })
        .catch(err => {
          console.log(err);
        });
    },
    initGeoJSON(options) {
      // console.log("options---", options);
      window.leafletMap.setView(options.centerLatlng, options.zoom);
      axios
        .get(options.url)
        //Success返回
        .then(data => {
          // console.log("data----", data);
          var all = [
            "#f7acbc",
            "#deab8a",
            "#817936",
            "#444693",
            "#ef5b9c",
            "#fedcbd"
          ];
          window.gzGeoJSON = L.geoJSON(data.data, {
            style: () => {
              return {
                color: "white",
                fillColor: all[Math.floor(Math.random() * all.length)],
                weight: 1,
                fillOpacity: 0.5
              };
            },
            onEachFeature: (feature, layer) => {
              if (feature.geometry.coordinates) {
                layer.center = window.getCenterPoint(
                  feature.geometry.coordinates[0]
                );
              }
              if (feature.geometry.geometries) {
                layer.center = window.getCenterPoint(
                  feature.geometry.geometries[0].coordinates[0]
                );
              }
              layer.propertiesName = feature.id;
              feature.properties &&
                feature.properties.name &&
                layer.bindTooltip(feature.properties.name, {
                  direction: "bottom",
                  className: "my_tooltip",
                  permanent: true
                });
            }
          })
            .on("click", e => {
              this.initGeoJSON({
                url: `../../../../public/geojson/${e.layer.propertiesName}.json`,
                centerLatlng: e.layer.center,
                zoom: 13
              });
              window.gzGeoJSON.remove();
              var myDataObj = {
                shiJi: { name: "石碁镇", list: zhenList.sJList },
                luoPu: { name: "洛浦街道", list: zhenList.lPList },
                huaLong: { name: "化龙镇", list: zhenList.hLList },
                nanCun: { name: "南村镇", list: zhenList.nCList },
                xinZao: { name: "新造镇", list: zhenList.xZList },
                daShi: { name: "大石街道", list: zhenList.dSList },
                zhongCun: { name: "钟村街道", list: zhenList.zCList },
                shiBi: { name: "石壁街道", list: zhenList.sBList },
                dongHuan: { name: "东环街道", list: zhenList.dHList },
                shaTou: { name: "沙头街道", list: zhenList.sTList },
                qiaoNan: { name: "桥南街道", list: zhenList.qNList },
                xiaoGuWei: { name: "小谷围街道", list: zhenList.GWList },
                daLong: { name: "大龙街道", list: zhenList.dLList },
                shiLou: { name: "石楼镇", list: zhenList.sLList },
                shiQiao: { name: "市桥街道", list: zhenList.sQList },
                shaWan: { name: "沙湾街道", list: zhenList.sWList }
              };
              if (e.layer.propertiesName == "shiJi") {
                this.leftContainer = 2;
                this.rightBomArea = 2;
              } else {
              }
              var villageList = myDataObj[e.layer.propertiesName].list;
              this.cenTitleText = myDataObj[e.layer.propertiesName].name;

              // function initSelect() {
              let mySelect = document.getElementById("mySelect");
              // console.log(mySelect)
              if (villageList) {
                for (let index = 0; index < villageList.length; index++) {
                  const element = villageList[index];
                  let optionDom = document.createElement("option");
                  optionDom.value = JSON.stringify(element);
                  optionDom.innerHTML = element.name;
                  mySelect.appendChild(optionDom);
                  this.mySelectShow = true;
                }
              }
              // }
              // initSelect();
            })
            .addTo(window.leafletMap);
        })
        //Failure返回
        .catch(error => {
          console.log(error);
        });
    },

    // -----------------------------------
    formatSeconds(value) {
      var theTime1 = parseInt(value); // 需要转换的时间分钟
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天

      if (theTime1 > 60) {
        theTime2 = parseInt(theTime1 / 60);
        theTime1 = parseInt(theTime1 % 60);
        if (theTime2 > 24) {
          // 大于24小时
          theTime3 = parseInt(theTime2 / 24);
          theTime2 = parseInt(theTime2 % 24);
        }
      }
      var result = "";
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分钟";
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    }
  }
};
</script>

<style scoped lang="scss">
// @import "../../../assets/fonts/icomoon.css";

#btn {
  position: absolute;
  top: 0;
  right: 0.83rem;
  z-index: 999;
  background-color: #e5e5e5;
  padding: 0.13rem;
  font-size: 0.5rem;
  color: #000;
}

#PositionBtn {
  position: absolute;
  top: 30px;
  right: 0.83rem;
  z-index: 999;
  background-color: #e5e5e5;
  padding: 0.13rem;
  color: #000;
  font-size: 0.5rem;
}

#mySelect {
  position: absolute;
  top: 60px;
  right: 0.83rem;
  z-index: 999;
}

// -----------
.icon-dot {
  margin-top: 0.08rem;
}

.visual {
  width: 100%;
  min-height: 100vh;
  background: url("~@/assets/img/bg.jpg") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  color: #fff;
  font-size: 0.67rem;
}

/* 整体布局 */
.layout {
  min-width: 42.67rem;
  max-width: 80rem;
  min-height: 32.5rem;
  margin: 0 auto;
  background-image: url("~@/assets/img/logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 3.67rem 0.83rem 0;
  display: flex;
}

.cloumn {
  flex: 1.1;
  /* background-color: #f00; */
}

.cloumn:nth-child(2) {
  flex: 2;
  margin: 1.333333rem 0.833333rem 0;
}

.borderimage {
  border: 0.04rem solid;
  border-image-source: url("~@/assets/img/border.png");
  /* 上  右  下  左 */
  /* 上   左右   下 */
  /* 上下   左右 */
  /* 四周一样 */
  border-image-slice: 55 42 26 138;
  border-image-width: 2.291667rem 1.75rem 1.083333rem 5.75rem;
  /* padding: 0.416667rem; */
  box-sizing: border-box;
  margin-bottom: 0.42rem;
}

.icon-dot {
  margin-top: 0.08rem;
}

.title {
  height: 1.88rem;
  line-height: 1.88rem;
  background-image: linear-gradient(to right, #2743ce, #002773, #030b646c);
  padding-left: 0.83rem;
  z-index: 99;
}

/* 左侧 */
/* 市区设备运行情况 */
.townBaseinfo {
  height: 40.67rem;
}

.townBaseinfo .content {
  /* display: flex; */
  /* align-items: center; */
  padding: 0.42rem 0.83rem;
}

.townBaseinfo .content li {
  display: flex;
  align-items: center;
  margin-bottom: 0.88rem;
  font-size: 0.75rem;
}

.townBaseinfo .content li:first-child {
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

.townBaseinfo .content > li div:first-child {
  width: 26%;
}

.townBaseinfo .content > li div:nth-of-type(n + 2) {
  width: 24%;
  text-align: center;
}

.townBaseinfo .content > li:nth-of-type(n + 2) div:nth-of-type(n + 2) {
  font-size: 1.08rem;
  color: #00a8ff;
}

/* 二级 左边第一个盒子 镇设备运行情况 */
.lFirstBox {
  height: 10.83rem;
}

.lFirstBox ul {
  padding: 0.42rem 1rem;
}

.lFirstBox li {
  display: flex;
  align-items: center;
  margin-bottom: 0.42rem;
  font-size: 0.5rem;
  opacity: 0.8;
}

.lFirstBox li > div {
  display: flex;
  align-items: center;
  width: 36%;
}

.lFirstBox li > div:first-child {
  width: 22%;
  font-size: 1rem;
  color: #00dc50;
  margin-right: 0.58rem;
}

.lFirstBox li > div:nth-child(2) {
}

.lFirstBox li > div:nth-child(3) {
  margin-left: 0.42rem;
}

.lFirstBox li:nth-child(2) > div:first-child {
  color: #fea500;
}

.lFirstBox li:nth-child(3) > div:first-child {
  color: rgb(223, 20, 223);
}

.lFirstBox li span {
  color: #3bdbfe;
  font-size: 1.67rem;
  margin-left: 0.21rem;
}

/* 二级 左边第二个盒子 Device Details */
.lSecondBox {
  height: 15.42rem;
}

.lSecondBox .faultInfo .content {
  padding: 0.42rem 1.08rem;
}

.lSecondBox .faultInfo .content > p {
  margin-bottom: 0.17rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.lSecondBox .faultInfo .content > p > span {
  color: #00a8ff;
}

/* 二级 左边第三个盒子 设备故障Statistics */
.lthirdlyBox {
  height: 13.58rem;
}

.lthirdlyBox .faultStat .content {
  padding: 0.67rem 1.08rem;
  font-size: 1.5rem;
}

.lthirdlyBox .faultStat .content .data,
.lthirdlyBox .faultStat .content .state {
  display: flex;
}

.lthirdlyBox .faultStat .content .data .bigBox > div > :last-child {
  color: #00a8ff;
}

.lthirdlyBox .faultStat .content .data .center {
  color: #fe0000;
}

.lthirdlyBox .faultStat .content .data .right {
  color: #00ff4c;
}

.lthirdlyBox .faultStat .content .left,
.lthirdlyBox .faultStat .content .center,
.lthirdlyBox .faultStat .content .right {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lthirdlyBox .faultStat .content .left .bigBox {
  margin-bottom: 0.42rem;
}

.lthirdlyBox .faultStat .content .left .bigBox > div {
  display: flex;
  align-items: center;
}

.lthirdlyBox .faultStat .content .left .bigBox > div > div:first-child {
  margin-right: 0.83rem;
  font-size: 0.5rem;
}

.lthirdlyBox .faultStat .content .left .first {
  margin-right: 0.83rem;
}

.lthirdlyBox .faultStat .content .left .first div {
  margin-bottom: 0.75rem;
}

.lthirdlyBox .faultStat .content .center {
  flex: 1;
}

.lthirdlyBox .faultStat .content .right {
  flex: 1;
}

.lthirdlyBox .faultStat .content .left .bgcColor,
.lthirdlyBox .faultStat .content .center .bgcColor,
.lthirdlyBox .faultStat .content .right .bgcColor {
  width: 100%;
  height: 0.92rem;
  margin-bottom: 0.33rem;
  background-color: #00a8ff;
}

.lthirdlyBox .faultStat .content .center .bgcColor {
  background-color: #fe0000;
}

.lthirdlyBox .faultStat .content .right .bgcColor {
  background-color: #00ff4c;
}

.lthirdlyBox .faultStat .left .box {
  display: flex;
}

/* ----------- */

/* 中间 */
.cenTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.67rem;
  margin-top: 0.83rem;
  color: #f2f3f7;
}

.cenTitle span {
  font-size: 1.67rem;
  margin-top: 2.08rem;
  color: #f2f3f7;
  margin: 0 1.67rem;
}

.cenTitle div {
  width: 3.75rem;
  height: 0.13rem;
  background-image: linear-gradient(to right, #47defd, #406eb2ce, #030b646c);
}

.cenTitle div:last-child {
  background-image: linear-gradient(to right, #030b646c, #406eb2ce, #47defd);
}

.cen > ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 0.83rem;
}

.cen > ul li {
  display: flex;
  align-items: center;
}

.cen > ul li span {
  font-size: 2.92rem;
  color: #3bdbfe;
  margin-left: 0.42rem;
}

.cen #firstBox {
  height: 32.33rem;
  width: 100%;
  background-color: #0e358998;
}

.cen > #secondBox {
  width: 100%;
  height: 32.33rem;
  position: relative;
}

/* 中间第三层 */
.cen #thirdlyBox {
  position: relative;
  height: 32.33rem;
  width: 100%;
  background-color: #0e358998;
}

.cen #thirdlyBox #three_map {
  position: relative;
  /* background-image: url(/assets/img/map.jpg); */
}

/* .cen #thirdlyBox #three_map .map_tap {
    position: absolute;
    width: 0.83rem;
    height: 2.08rem;
    top: 57%;
    left: 57%;
    background-color: red;
  } */
.cen #thirdlyBox #three_map .mask {
  background: #000;
  opacity: 0.5;
}

/* 分布图 */
/* .cen .indexMap {
    width: 100%;
    height: 32.33rem;
  } */

/* 右侧 */

/* 报警信息 */
.alarmInfo {
  height: 25.25rem;
}

.alarmInfo .list {
  height: 23.38rem;
  overflow: hidden;
}

.alarmInfo .list ul {
  width: 100%;
  height: 20.83rem;
  /* animation-name:指定动画的Name
      animation-duration:动画的Completion Time，以秒为做单位 ，如果没有Setup则默认为0，动画不会有效果
      animation-interation-count:动画的执行的Frequency，默认为1，如果需要无限循环，Setup为infinite
      animation-delay:动画的延迟，默认为0
      animation-timing-function:动画的速度曲线，如 linear:匀速
      animation-direction:动画方向，如果Setup来回：alternate
      animation-play-state:动画播放的Status，play  paused
      */
  /* animation: move 1000s linear infinite; */
  padding: 0.42rem;
  padding-right: 0.83rem;
  padding-left: 0;
  position: relative !important;
}

.alarmInfo .list > ul {
}

.alarmInfo .list > ul .noData {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.67rem;
  color: #00dc50;
}

/* 创建一个动画 */
@keyframes move {
  from {
  }

  to {
    /* 往上移动50% */
    transform: translateY(-50%);
  }
}

/* 鼠标上移，停止动画 */
.alarmInfo .list ul:hover {
  animation-play-state: paused;
}

.alarmInfo .list > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.58rem;
  opacity: 0.8;
  margin-bottom: 0.67rem;
  padding-left: 0.67rem;
}

.alarmInfo .list > ul > li > .num {
  display: flex;
  align-items: center;
  width: 10%;
}

.alarmInfo .list > ul > li > div:last-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alarmInfo .list > ul > li > div:last-child > div:first-child {
  margin-bottom: 0.25rem;
}

.alarmInfo .list > ul > li > div:last-child > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alarmInfo .icon-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0;
}

.alarmInfo li:hover .icon-dot {
  opacity: 1;
  color: #3bdbfe;
}

.alarmInfo li:hover {
  color: #3bdbfe;
}

/* 点击弹出的信息 */

/* 视频监控 */
.rSecondBox {
  height: 15rem;
}

.rSecondBox #monitoringCoun {
}

.rSecondBox #monitoringCount .content {
  margin-top: 5rem;
  font-size: 1.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rSecondBox #monitoringCount .content > div {
  display: flex;
  align-items: center;
}

.rSecondBox #monitoringCount .content > div > span {
  margin-left: 1.25rem;
  font-size: 2.08rem;
}

.rSecondBox #monitoringCount .content > div:first-child > span {
  color: #00dc50;
}

.rSecondBox #monitoringCount .content > div:last-child > span {
  color: red;
}

.monitoring {
  height: 100%;
}

.monitoring .content {
  height: 13.13rem;
}

/* 充电占比 */
.rechargeAnswer {
  height: 100%;
}

.rechargeAnswer .content {
  height: 13.13rem;
}

.rechargeAnswer .content #answerPicture {
  height: 70%;
  margin-bottom: 0.83rem;
}

.rechargeAnswer .content .answerBox {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1rem;
  line-height: 1.25rem;
  padding: 0 1.67rem;
}

.rechargeAnswer .content .answerBox > div {
  text-align: center;
  height: 100%;
  background-color: #00dc50;
  color: #00dc50;
  white-space: nowrap;
}

.rechargeAnswer .content .answerBox > div:nth-child(2) {
  background-color: orange;
  color: orange;
}

.rechargeAnswer .content .answerBox > div:nth-child(1) {
}

.rechargeAnswer .content .answerBox > div:nth-child(1) > span {
  position: absolute;
  top: -1.33rem;
  left: 0;
}

.rechargeAnswer .content .answerBox > div:nth-child(3) > span {
  position: absolute;
  top: -1.33rem;
  right: 0;
}

.rechargeAnswer .content .answerBox > div:nth-child(3) {
  background-color: #40a2e5;
  color: #40a2e5;
}

.rechargeAnswer .content .answerBox > div > div:first-child {
  width: 100%;
  height: 100%;
  margin-bottom: 0.25rem;
}
</style>
